/* :root {
    --bg1: #aea0a0;
} */
@bg: #aea0a0;
@height: 100px;

* {
    margin: 0%;
    padding: 0%;
}

html,body {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

// Mixin
.samllBox {
    padding: 10px;
    gap: 10px;
}

// 把@mian-body这个变量的值设置为main，相当于给main起了一个别名叫“main-body”
@main-body: main;
// 选择器插值 @{main-body} {内部样式...}
// 选择器使用时，直接引用和单独引用不用前置选择符，类引用需要加选择符"."
@{main-body} {
    // 混合（Mixin）：是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。
    .samllBox();
    margin: 0% auto;
    width: 500px;
    height: 400px;
    display: flex;

    // 嵌套
    .bigBox {
        flex: 1;
        // background-color: var(--bg1);
        background-color: @bg;
    }

    // &代表父级元素
    &::before {
        content: '';
    }
}

// 属性变量
@borderstyle: border-style;
@styleline: solid;
@wrap: #wrap;
@{wrap} {
    width: 100px;
    height: 100px;
    // 变量名必须用大括号包含起来
    // 错误示例：@borderstyle： @styleline；
    @{borderstyle}: @styleline;
}

// URL变量

/* @images:'../img'
body {
    background: url("@{images}/cat.png");
} */

// 声明变量
@background: {background: red;} ;

// 变量运算
@ewidth1: 100px;
@column: #column;
@{column} {
    width: @ewidth1 - 10px;
}

// 变量的作用域（就近原则）
@a: 100%;
@var: @a;
#group {
    width: @var;
    @a: 9%;
}

// 用变量定义变量
@font1: @var1;
@var1: 'front';
#waps::after { 
    content: @var1;//将@var替换为其值content：@front；
}

// 媒体查询

// 混合方法
// 1.无参数方法
.card {
    width: 100px; 
    height: 100px;
}
.bigcard {
    .card();
}
// 2.默认参数方法
.border(@a:10px,@b: 50px,@z: 30px,@color: black) {
    border: #aea0a0;
    // 指代传进来的全部参数,指代传进来的全部参数
    box-shadow: @arguments;
}
.bigbox2 {
    .border();
}
// 3.方法的匹配模式
.trar(top,@width:20px,@color:#000) {
    border-color: transparent transparent @color transparent;
}
.trar(right,@width:20px,@color:#000) {
    border-color: transparent @color transparent transparent;
}
.trar(bottom,@width:20px,@color:#000) {
    border-color: @color transparent transparent transparent;
}
.trar(left,@width:20px,@color:#000) {
    border-color: transparent transparent transparent @color;
}
// 用一个未知的去代替需要传输的数据，方便下的直接调用
.trar(@_,@width:20px,@color:#000) {
    border-style: solid;
    border: @width;
}
.bigbox3{
    .trar(left,50px,#999)
}
// 4.方法的命名空间
#crad(){
    background: #444;
    .d(@w:300px){
        width: @w;
        #a(@h: 300px){
        height: @h;
        }
    }
}
// 父级方法不加括号
#bogbox4{
    #crad > .d > #a(100px);
}
#bogbox5{
    #crad();
}
// 5.方法的条件筛选
.card {
    // when方法
    .border(@width,@color,@style) when(@width > 100px) and(@color=#999) {
        border: @style @color @width;
    }
    // when not 方法
    .background(@color) when not (@color >= #222){
        backgroumd: @color;
    }
    // ，逗号方法
    .font(@size:20px) when (@size > 50px),(@size < 100px) {
        font-size: @size;
    }
}
#main {
    .card > .border(200px,#999,solid);
}
// 6.数量不定的参数，"..."相当于拓展运算符
.boxshadow(...){
    box-shadow: @arguments;
}
.textShadow(@a,...){
    text-shadow: @arguments;
}
#main{
    .boxshadow(1px,4px,30px,#444);
}
// 7.方法使用important！,强制调高优先级
.border2{
    border: 1px solid 2px;
    margin: 50px;
}
#main {
    .border2() !important;
}
// 8.循环方法,递归演示
.genrate-columns(4);
.genrate-columns(@n,@i:1) when(@i <= @n){
    .column-@{i}{
        width: (@i*100%/@n);
    }
    .genrate-columns((@n), (@i + 1))
}
// 9.属性拼接的方法 "+_"代表的是空格，"+"代表的是逗号
.box-shadow2(){
    box-shadow+: inset 0 0 10px #555;
}
#main{
    .box-shadow2();
    box-shadow+: 0 0 20px #222;
}
// 10.实战技巧
.average(@x,@y) {
    @average: ((@x + @y) / 2);
}
div {
    .average(16px,50px);
    padding: @average;
}

// 继承
// 1.extend
.animation{
    transition: all .3s ease-out;
    .hide{
        transform: scale(0);
    }
}
#bigbox11{
    &:extend(.animation);
}
// 2.全局搜索替换
#bigbox21{
    width: 200px;
}
#bigbox{
    &:after{
        content: 'less is good';
    }
}
.bigbox32:extend(#bigbox all){
    margin: 0%;
}
// 3.减少代码重复性

// 导入
// 1.文件导入
// 引用 @import "library"; //library.less
// 引用 @import "index.css"
// reference是less中最强大的属性，但是只导入，不进行编译，视觉上不可见
// @import(reference) "library.less";
// once只会被导入一次，后面再导入并不会再显示
// @import(once) "library.less";

// 条件表达式
// 1.待条件的混合，之前的when语句等
// 2.类型检测（iscolor,isnumber,isstring,iskeyword,isurl）
.mixin(@a:#fff,@b:0) when(isNumber(@b)){
    color: @a;
    font-size: @b;
}

// 函数，包括了颜色的定义、操作、混合，字符串的处理等
// 1.颜色
.boxing {
    // 转换成16进制
    color: color(red);
}